<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>编辑短信模板</title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <style>
        .mainBox {
            padding: 15px;
        }

        .main-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .layui-form-item {
            margin-bottom: 20px;
        }

        .form-tip {
            display: block;
            margin-top: 8px;
            color: #666;
            font-size: 12px;
            line-height: 1.5;
        }

        .form-tip i {
            color: #1E9FFF;
            margin-right: 4px;
        }

        .json-example {
            margin-top: 8px;
            padding: 10px;
            background: #f8f8f8;
            border-radius: 4px;
            border: 1px solid #eee;
            font-family: monospace;
            font-size: 12px;
            color: #333;
            white-space: pre-wrap;
            word-break: break-all;
        }

        .bottom {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 15px;
            background: #fff;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
            z-index: 99;
        }

        .button-container {
            text-align: center;
        }

        .button-container button {
            margin: 0 8px;
        }
    </style>
</head>

<body>
    <form class="layui-form" action="" lay-filter="sms-template-edit">
        <div class="mainBox">
            <div class="main-container">
                <!-- 模板标题（必填） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">模板标题 <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="name" id="name" lay-verify="required|verifyName" autocomplete="off"
                            placeholder="请输入模板标题（如：验证码发送模板）" class="layui-input">
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>模板标题为唯一标识，不可与其他模板重复
                        </span>
                    </div>
                </div>

                <!-- 短信供应商（必填） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">短信供应商 <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <select name="sms_provider" id="sms_provider" lay-verify="required" lay-search>
                            <option value="">请选择短信供应商</option>
                            <!-- 供应商选项通过JS动态加载 -->
                        </select>
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>选择模板关联的短信供应商（需先配置供应商）
                        </span>
                    </div>
                </div>

                <!-- 模板签名（必填） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">模板签名 <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="sign" id="sign" lay-verify="required|verifySign" autocomplete="off"
                            placeholder="请输入短信签名（如：聪明掌柜）" class="layui-input">
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>签名需与供应商平台审核通过的一致，长度不超过20个字符
                        </span>
                    </div>
                </div>

                <!-- 模板CODE（必填） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">模板CODE <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="template_id" id="template_id" lay-verify="required|verifyTemplateId"
                            autocomplete="off" placeholder="请输入供应商平台的模板CODE（如：SMS_460755411）" class="layui-input">
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>模板CODE从供应商平台获取，仅支持字母、数字、下划线和横线
                        </span>
                    </div>
                </div>

                <!-- 模板变量（非必填：为空则不更新） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">模板变量</label>
                    <div class="layui-input-block">
                        <textarea name="template_data" id="template_data" lay-verify="required|verifyJson" autocomplete="off"
                            placeholder="不修改请留空（修改请输入标准JSON格式）" class="layui-textarea" rows="6"></textarea>
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>变量需与模板CODE对应的字段一致（如{"code":"123456"}）
                        </span>
<div class="json-example">
示例：
{   
    "code": "666666", // 验证码（根据实际模板字段调整）
    "product": "聪明掌柜APP" // 产品名称（根据实际模板字段调整）
}</div>
                    </div>
                </div>

                <!-- 描述说明（非必填） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">描述说明</label>
                    <div class="layui-input-block">
                        <textarea name="description" id="description" autocomplete="off" placeholder="不修改请留空（修改请输入用途说明）"
                            class="layui-textarea" rows="3"
                            style="height: 500px; height: auto !important;"></textarea>
                    </div>
                </div>

                <!-- 模板状态（单选：1=开启，0=关闭） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">模板状态 <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <input type="radio" name="is_active" value="1" title="开启" lay-skin="tag">
                        <input type="radio" name="is_active" value="0" title="关闭" lay-skin="tag">
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>关闭状态的模板无法用于发送短信
                        </span>
                    </div>
                </div>

                <!-- 排序号（非负整数） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">排序号</label>
                    <div class="layui-input-block">
                        <input type="text" name="sort_num" id="sort_num" lay-verify="verifySort" autocomplete="off"
                            placeholder="数字越大，列表中越靠前（不修改请留空）" class="layui-input">
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部提交按钮区域 -->
        <div class="bottom">
            <div class="button-container">
                <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit
                    lay-filter="sms-template-save">
                    <i class="layui-icon layui-icon-ok"></i>
                    提交
                </button>
                <button type="button" class="pear-btn pear-btn-danger pear-btn-sm" id="close-btn">
                    <i class="layui-icon layui-icon-close"></i>
                    关闭
                </button>
            </div>
        </div>
    </form>

    <!-- 引入依赖JS文件 -->
    <script src="../../../component/com/api.js"></script>
    <script src="../../../component/com/auth.js"></script>
    <script src="../../../component/layui/layui.js"></script>
    <script src="../../../component/pear/pear.js"></script>
    <script>
        layui.use(['form', 'jquery', 'layer'], function () {
            let form = layui.form;
            let $ = layui.jquery;
            let layer = layui.layer;

            // 基础配置
            const API_BASE_URL = apiConfig.baseUrl;
            const AUTH_TOKEN = window.localStorage.getItem("token") || window.sessionStorage.getItem("token");
            const urlParams = new URLSearchParams(window.location.search);
            const TEMPLATE_ID = urlParams.get('id'); // 编辑的模板ID
            const SMS_PROVIDER_API = `${API_BASE_URL}/sms/provider/`; // 供应商接口（加载下拉）
            let initialData = {}; // 存储初始数据（用于对比变更）

            // 1. 页面初始化：加载模板详情+加载供应商下拉
            if (TEMPLATE_ID) {
                loadSmsProviders(); // 先加载供应商（确保回显时下拉有选项）
                loadTemplateDetail(); // 加载模板详情回显
            } else {
                layer.msg('模板ID不存在，无法编辑', { icon: 2, time: 2000 });
                setTimeout(() => parent.layer.close(parent.layer.getFrameIndex(window.name)), 2000);
            }

            // 加载短信供应商下拉选项
            function loadSmsProviders() {
                $.ajax({
                    url: SMS_PROVIDER_API,
                    type: 'GET',
                    headers: { "Authorization": AUTH_TOKEN },
                    success: function (res) {
                        if (res.success && res.data.results.length > 0) {
                            let options = '<option value="">请选择短信供应商</option>';
                            res.data.results.forEach(provider => {
                                options += `<option value="${provider.id}">${provider.sms_name}</option>`;
                            });
                            $('#sms_provider').html(options);
                            form.render('select'); // 重新渲染下拉框
                        }
                    },
                    error: function () {
                        layer.msg('供应商列表加载失败，请刷新重试', { icon: 2, time: 2000 });
                    }
                });
            }

            // 加载模板详情并回显表单
            function loadTemplateDetail() {
                const loading = layer.load(2, { shade: 0.3 });
                $.ajax({
                    url: `${API_BASE_URL}/sms/template/${TEMPLATE_ID}/`,
                    dataType: 'json',
                    type: 'GET',
                    headers: { "Authorization": AUTH_TOKEN },
                    success: function (result) {
                        layer.close(loading);
                        if (result.success && result.data) {
                            const data = result.data;
                            // 保存初始数据（深拷贝，统一转为字符串便于对比）
                            initialData = {
                                name: data.name || '',
                                sms_provider: data.sms_provider.toString() || '', // 供应商ID转字符串（后端是外键ID）
                                sign: data.sign || '',
                                template_id: data.template_id || '',
                                template_data: data.template_data || '',
                                description: data.description || '',
                                is_active: data.is_active.toString() || '1', // 转字符串（1=开启，0=关闭）
                                sort_num: data.sort_num.toString() || '0'
                            };

                            // 回显表单（匹配表单字段名）
                            form.val("sms-template-edit", initialData);
                            // 重新渲染表单（解决单选框、下拉框回显不选中问题）
                            form.render();
                        } else {
                            const errorMsg = result.message || '加载模板详情失败';
                            layer.msg(errorMsg, { icon: 2, time: 2000 });
                        }
                    },
                    error: function (xhr) {
                        layer.close(loading);
                        const errorMsg = xhr.status === 401 ? '登录已过期，请重新登录' : '网络异常，加载失败';
                        layer.msg(errorMsg, { icon: 2, time: 2000 });
                        if (xhr.status === 401) parent.window.location.href = '../../../login.html';
                    }
                });
            }

            // 2. 表单验证规则（适配短信模板字段）
            form.verify({
                // 模板标题：非空+长度1-20
                // verifyName: function (value) {
                //     const trimValue = value.trim();
                //     if (trimValue.length === 0) return "模板标题不能为空";
                //     if (trimValue.length > 20) return "模板标题长度不能超过20个字符";
                //     // 唯一性校验（编辑时排除自身）
                //     return new Promise((resolve, reject) => {
                //         $.ajax({
                //             url: `${API_BASE_URL}/sms/template/check/name/`,
                //             type: 'GET',
                //             headers: { "Authorization": AUTH_TOKEN },
                //             data: { name: trimValue, id: TEMPLATE_ID },
                //             success: function (res) {
                //                 if (res.success && res.data.is_exist) {
                //                     reject(`模板标题「${trimValue}」已存在，请更换`);
                //                 } else {
                //                     resolve();
                //                 }
                //             },
                //             error: function () {
                //                 reject("标题唯一性检查失败，请稍后重试");
                //             }
                //         });
                //     });
                // },
                // 模板签名：非空+长度1-20
                verifySign: function (value) {
                    const trimValue = value.trim();
                    if (trimValue.length === 0) return "模板签名不能为空";
                    if (trimValue.length > 128) return "模板签名长度不能超过128个字符";
                },
                // 模板CODE：非空+格式校验
                // verifyTemplateId: function (value) {
                //     const trimValue = value.trim();
                //     if (trimValue.length === 0) return "模板CODE不能为空";
                //     const reg = /^[a-zA-Z0-9_\-]{5,64}$/; // 5-64位字母/数字/下划线/横线
                //     if (!reg.test(trimValue)) {
                //         return "模板CODE格式错误，仅支持5-64位字母、数字、下划线或横线";
                //     }
                //     // 唯一性校验（编辑时排除自身）
                //     return new Promise((resolve, reject) => {
                //         $.ajax({
                //             url: `${API_BASE_URL}/sms/template/check-template-id/`,
                //             type: 'GET',
                //             headers: { "Authorization": AUTH_TOKEN },
                //             data: { template_id: trimValue, id: TEMPLATE_ID },
                //             success: function (res) {
                //                 if (res.success && res.data.is_exist) {
                //                     reject(`模板CODE「${trimValue}」已存在，请更换`);
                //                 } else {
                //                     resolve();
                //                 }
                //             },
                //             error: function () {
                //                 reject("模板CODE唯一性检查失败，请稍后重试");
                //             }
                //         });
                //     });
                // },
                // 模板变量：JSON格式校验（仅当有值时校验）
                verifyJson: function (value) {
                    if (!value.trim()) return; // 空值不校验
                    try {
                        const jsonData = JSON.parse(value.trim());
                        if (typeof jsonData !== 'object' || jsonData === null || Object.keys(jsonData).length === 0) {
                            return "模板变量需为非空JSON对象（如{\"code\":\"123456\"}）";
                        }
                    } catch (e) {
                        return "模板变量格式错误，请输入标准JSON（参考示例）";
                    }
                },
                // 排序号：非负整数
                verifySort: function (value) {
                    if (!value.trim()) return; // 空值不校验
                    const sort = parseInt(value);
                    if (isNaN(sort) || sort < 0 || sort > 9999) {
                        return "排序号需为0-9999之间的非负整数";
                    }
                }
            });

            // 3. 检查数据是否变更（对比初始数据与当前数据）
            function isDataChanged(currentData) {
                // 对比必填/常规字段（去空后对比，避免空格误判）
                const compareFields = ['name', 'sms_provider', 'sign', 'template_id', 'is_active'];
                for (let field of compareFields) {
                    const currentVal = currentData[field]?.trim() || '';
                    const initialVal = initialData[field]?.trim() || '';
                    if (currentVal !== initialVal) {
                        return true; // 任意必填字段变更则视为有修改
                    }
                }

                // 对比可选字段：排序号（空值视为未修改，非空则对比）
                const currentSort = currentData.sort_num?.trim() || '';
                const initialSort = initialData.sort_num?.trim() || '';
                if (currentSort && currentSort !== initialSort) {
                    return true;
                }

                // 对比可选字段：模板变量（空值视为未修改，非空则对比）
                const currentTemplateData = currentData.template_data?.trim() || '';
                const initialTemplateData = initialData.template_data?.trim() || '';
                if (currentTemplateData && currentTemplateData !== initialTemplateData) {
                    return true;
                }

                // 对比可选字段：描述说明（空值视为未修改，非空则对比）
                const currentDesc = currentData.description?.trim() || '';
                const initialDesc = initialData.description?.trim() || '';
                if (currentDesc && currentDesc !== initialDesc) {
                    return true;
                }

                // 所有字段均无变更
                return false;
            }

            // 4. 表单提交事件（处理数据转换与接口请求）
            form.on('submit(sms-template-save)', function (data) {
                const currentData = data.field;

                // 第一步：检查是否有实际变更
                if (!isDataChanged(currentData)) {
                    layer.msg("未修改任何数据，无需提交", { icon: 3, time: 1500 });
                    return false;
                }

                // 第二步：处理提交数据（格式转换+空值过滤）
                const submitData = {};

                // 1. 必选字段：直接赋值（已通过校验，无需额外处理）
                submitData.name = currentData.name.trim();
                submitData.sms_provider = parseInt(currentData.sms_provider); // 供应商ID转整数（适配后端外键）
                submitData.sign = currentData.sign.trim();
                submitData.template_id = currentData.template_id.trim();
                submitData.is_active = parseInt(currentData.is_active); // 状态转整数（1=开启，0=关闭）

                // 2. 可选字段：非空才添加（避免覆盖后端原有值）
                // 排序号：非空则转整数
                if (currentData.sort_num?.trim()) {
                    submitData.sort_num = parseInt(currentData.sort_num.trim());
                }
                // 模板变量：非空则保留（后端存储为JSON字符串，无需额外解析）
                if (currentData.template_data?.trim()) {
                    submitData.template_data = currentData.template_data.trim();
                }
                // 描述说明：非空则保留
                if (currentData.description?.trim()) {
                    submitData.description = currentData.description.trim();
                }

                // 第三步：发送更新请求（PATCH 部分更新）
                const loading = layer.load(2, { shade: 0.3, shadeClose: false });
                $.ajax({
                    url: `${API_BASE_URL}/sms/template/${TEMPLATE_ID}/`,
                    data: JSON.stringify(submitData),
                    dataType: 'json',
                    contentType: 'application/json',
                    type: 'PATCH',
                    headers: { "Authorization": AUTH_TOKEN },
                    success: function (result) {
                        layer.close(loading);
                        if (result.success || result.code === 200) {
                            layer.msg(result.message || '短信模板更新成功', {
                                icon: 1,
                                time: 1500
                            }, function () {
                                // 关闭当前弹窗 + 刷新父页面表格
                                parent.layer.close(parent.layer.getFrameIndex(window.name));
                                parent.layui.table.reload("base-table");
                            });
                        } else {
                            // 提取后端错误信息（适配序列化器错误格式）
                            let errorMsg = result.message || '更新失败，请重试';
                            if (result.data && typeof result.data === 'object') {
                                const firstErrorKey = Object.keys(result.data)[0];
                                if (firstErrorKey) {
                                    errorMsg = result.data[firstErrorKey][0]; // 取第一个错误提示
                                }
                            }
                            layer.msg(errorMsg, { icon: 2, time: 2000 });
                        }
                    },
                    error: function (xhr) {
                        layer.close(loading);
                        // 处理网络错误/权限过期
                        const errorMsg = xhr.status === 401
                            ? '登录已过期，请重新登录'
                            : `网络异常（${xhr.status}），更新失败`;
                        layer.msg(errorMsg, { icon: 2, time: 2000 });
                        // 登录过期则跳转登录页
                        if (xhr.status === 401) {
                            setTimeout(() => {
                                parent.window.location.href = '../../../login.html';
                            }, 2000);
                        }
                    }
                });

                return false; // 阻止表单默认提交
            });

            // 5. 关闭按钮事件（关闭当前弹窗，不刷新）
            $('#close-btn').on('click', function () {
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            });

            // 6. 页面关闭前提示（避免误操作丢失数据）
            window.onbeforeunload = function (e) {
                // 仅当有数据变更时才提示
                const currentData = form.val("sms-template-edit");
                if (isDataChanged(currentData)) {
                    const message = "当前页面有未提交的修改，关闭后将丢失，是否确认？";
                    e.returnValue = message; // 兼容IE/Edge
                    return message; // 兼容Chrome/Firefox
                }
            };
        });
    </script>
</body>

</html>